<template>
  <div class="map h-100P w-100P flex-column">
    <div class="legend flex align-center">
      <span class="item-title">地图示例</span>
      <span v-for="(legend,index) in mapLegend" :key="index" class="third-title align-center">
        <svg-icon
          v-if="legend.svgIcon"
          class="legend-icon"
          :icon-class="legend.svgIcon"
          :class="legend.iconClass"
          :style="legend.style"
        ></svg-icon>
        <img
          v-else-if="legend.imgIcon"
          class="legend-icon"
          :class="legend.iconClass"
          :src="legend.imgIcon"
          :style="legend.style"
          alt=""
        />
        <div
          v-else
          class="legend-icon"
          :class="legend.iconClass"
          :src="legend.imgIcon"
          :style="legend.style"
        ></div>
        <span class="legend-name fz-14">{{ legend.text }}</span>
      </span>
    </div>
    <div class="map-content flex-sub  justify-center align-center rela">
      <span class="warn-text" v-if="isLocation">该设备未绑定位置信息，无法显示地理位置</span>
      <Amap :zoom="20" :center="[113.598276, 22.365508]">
        <amap-marker
          v-for="device in devicesList"
          :position="[device.lng, device.lat]"
          :offset="[0, 0]"
          anchor="center"
          :key="device.id"
        >
          <div class="marker-using-slot" @click="ShowInfoWindow(device)">
            <img :src="device.icon" alt="" class="h-20 w-20" />
            <img
              class="action"
              v-if="device.action==='yell'"
              src="@/assets/img/red-bubble.png"
              alt=""
            />
            <img
              class="action"
              v-if="device.action==='support'"
              src="@/assets/img/blue-bubble.png"
              alt=""
            />
          </div>
        </amap-marker>
        <AmapInfoWindow
          :visible="infoWindow.visible"
          :position="infoWindow.position"
          :offset="[0,-20]"
          is-custom
        >
          <div class="amap-info-window bg-white pd-10 flex-column">
            <div class="head justify-between align-center">
              <div>
                {{ infoWindow.name }}
              </div>
              <i class="el-icon-close fw-20" @click="handleCloseInfoWindow"></i>
            </div>
            <el-image
              v-if="imgSrc"
              :src="imgSrc|imageFormat"
              fit="fill"
              class="mg-top-6 body bg-gray "
              @click="isPictureShow=true"
            ></el-image>
          </div>
        </AmapInfoWindow>
      </Amap>
    </div>
    <el-dialog title="查看图片" :visible.sync="isPictureShow">
      <el-image :src="imgSrc| imageFormat" style="width: 100%; height: 400px;" fit="fit" />
    </el-dialog>
  </div>
</template>

<script>
import Amap from '@amap/amap-vue/lib/amap'
import AmapMarker from '@amap/amap-vue/lib/marker'
import { loadAmap, loadPlugins } from '@amap/amap-vue'
import AmapInfoWindow from '@amap/amap-vue/lib/info-window'
import { isEmpty, uniqBy } from 'lodash'

export default {
  name: 'Map',
  components: { Amap, AmapMarker, AmapInfoWindow },
  props: {
    eventData: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    imgLocationVo: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    imgUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      isPictureShow: false,
      imgSrc: '',
      infoWindow: {
        visible: true,
        position: null,
      },
    }
  },

  computed: {
    isLocation() {
      return !this.eventData && this.eventData.deviceVo && this.eventData.locationVo
    },
    mapLegend() {
      return [
        {
          imgIcon: require('@/assets/img/red-bubble.png'),
          style: 'width:14px;height:14px',
          text: '发起对象',
        },
        {
          imgIcon: require('@/assets/img/blue-bubble.png'),
          style: 'width:14px;height:14px',
          text: '联动对象',
        },
      ]
    },
    imgList() {
      console.log(this.eventData)
      if (isEmpty(this.eventData)) {
        return []
      }
      return this.eventData.algEventChildVos.map(event => {
        return { id: event.deviceVo.id, fileId: event.fileId }
      })
    },
    devicesList() {
      if (isEmpty(this.eventData)) {
        return []
      }
      const yellDeviceList = [this.eventData.deviceVo || []].map(deviceVo => ({
        id: deviceVo.id,
        name: deviceVo.remarkName,
        action: 'yell',
        icon: deviceVo.productVo.icon,
        lng: (deviceVo && deviceVo.locationVo && deviceVo.locationVo.longitude) || '',
        lat: (deviceVo && deviceVo.locationVo && deviceVo.locationVo.latitude) || '',
      }))

      const supportDeviceList = [...(this.eventData.algEventChildVos || [])].map(
        ({ deviceVo }) => ({
          id: deviceVo.id,
          name: deviceVo.remarkName,
          action: 'support',
          icon: deviceVo.productVo.icon,
          lng: (deviceVo && deviceVo.locationVo && deviceVo.locationVo.longitude) || '',
          lat: (deviceVo && deviceVo.locationVo && deviceVo.locationVo.latitude) || '',
        })
      )
      return uniqBy([...yellDeviceList, ...supportDeviceList], 'id')
    },
  },
  created() {
    this.init()
  },
  watch: {
    imgUrl(val) {
      this.imgSrc = val
      const device = {
        name: this.imgLocationVo.remarkName,
        lng: this.imgLocationVo.longitude,
        lat: this.imgLocationVo.latitude,
      }
      this.handleShowInfoWindow(device)
    },
  },
  methods: {
    init() {
      this.initMap()
    },
    async initMap() {
      await loadAmap()
      // 插件
      await loadPlugins(['AutoComplete', 'MoveAnimation'])
    },
    ShowInfoWindow(device) {
      this.imgSrc = this.imgList.find(item => item.id === device.id).fileId
      console.log(this.imgSrc)
      this.handleShowInfoWindow(device)
    },
    handleCloseInfoWindow() {
      this.infoWindow.visible = false
    },
    handleShowInfoWindow(device) {
      this.infoWindow = {
        visible: true,
        name: device.name,
        position: [device.lng, device.lat],
      }
    },
  },
}
</script>

<style scoped lang="scss">
.map {
  .legend {
    padding: vw(14px) vw(20px) vw(12px) vw(20px);
    border-radius: 4px;
    box-shadow: -1px 0 4px 0 rgba(29, 29, 29, 0.15);

    .item-title {
      margin-right: vw(20px);
    }

    .legend-icon {
      margin-right: vw(10px);
    }

    .legend-name {
      margin-right: vw(18px);
    }
  }

  .map-content {
    border-radius: 4px;

    .marker-using-slot {
      position: relative;

      .action {
        position: absolute;
        top: -5px;
        left: -7px;
        width: 30px;
        height: 30px;
      }
    }

    .warn-text {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 999;
      color: #d12d1f;
    }

    .amap-info-window {
      background-color: white;

      .body {
        width: 200px;
        height: 120px;
      }

      .el-icon-close {
        cursor: pointer;
      }
    }
  }
}
</style>
